<template>
  <panel title="商品分类">
    <el-button slot="btn">添加分类</el-button>

    <el-table :data="list">
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="分类名字">
        <template slot-scope="scope">
          <span v-if="scope.row.isEdit === false">{{
            scope.row.cateName
          }}</span>
          <input v-else type="text" v-model="scope.row.cateName" />
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="!scope.row.isEdit"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.isEdit == false"
            @click="editList(scope.row)"
            >编辑</el-button
          >
          <el-button v-else @click="submit(scope.row)">完成</el-button>
          <el-button @click="del(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </panel>
</template>

<script>
import { getCateListReq, editCateReq, delClassifyReq } from "@/api/goods.api";
export default {
  data() {
    return {
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
      },
      list: [],
      isEdit: false,
      currentPage4: 1,
      total: null,
    };
  },

  methods: {
    async getList() {
      const res = await getCateListReq(this.pageInfo);
      // console.log(res);
      res.data.data.forEach((item) => {
        item.isEdit = false;
      });
      this.list = res.data.data;
      this.total = res.data.total;
    },

    editList(row) {
      row.isEdit = true;
    },

    submit(row) {
      console.log(row);
      editCateReq(row).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          row.isEdit = false;
        }
      });
    },

    handleSizeChange(val) {
      // this.pageinfo.currentPage = val
      console.log(val);
      //改变每页数量
      this.pageInfo.pageSize = val;
      //重新调用listGet
      this.getList();
    },

    handleCurrentChange(val) {
      // 改变页码
      this.pageInfo.currentPage = val;
      // 重新调用listGet
      this.getList();
    },

    del(res) {
      console.log(res.id);
      delClassifyReq(res.id).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.getList()
        }
      });
    },
  },

  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
</style>